<script setup>
import { reactive } from 'vue';

const props = withDefaults(defineProps(['list']), { list: [] })
const { list } = toRefs(props)

const Item = defineComponent(({ item }) => {
    let cls = undefined;
    if (item.children) {
        cls = item.children.map((d) => h(Item, { item: d }))
    }
    const show = computed(() => {
        if (item.fixed === true) {
            return true;
        }
        if (!search.value) {
            isExpand.value = false;
            return true;
        }
        const f = (item) => {
            let r = false;
            if (item.children) {
                for (const e of item.children) {
                    r = r || f(e)
                }
            }
            const l = [item.name, item.label, item.desc].map(s => s?.toLowerCase().indexOf(search.value.toLowerCase()) > -1 ? 1 : 0);
            const b = sum(l);
            return r || b > 0;
        }
        const bool = f(item)
        isExpand.value = bool;
        return bool;
    })

    const isExpand = ref(item?.fixed === true)
    const handleToggleExpand = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (item.fixed === true) {
            return;
        }
        isExpand.value = !isExpand.value;
    }

    return () => cls ? h('div', { class: `${show.value ? "is-show" : "is-hide"} w-full  ${item.fixed ? 'flex-1 overflow-hidden flex flex-col' : ''}`, onClick: handleToggleExpand }, [
        h('div', { class: `_nodelist-item flex items-center gap-6px w-full box-border p-x-10px p-y-4px select-none ${item.fixed === true ? 'is-fixed' : ''}  ${item.class || ''}` }, [
            item.icon ? typeof item.icon == 'string' ? h('b', { class: `${item.icon}` }) : h(item.icon) : '',

            h('b', { class: "flex-1 truncate", title: item.label }, item.label),
            item.fixed === true ? '' : h('span', { class: ` i-uiw:right transition-transform-500 ${isExpand.value ? 'is-open rotate-90' : 'is-close rotate-0'}` })
        ]),
        h('div', { class: `_children-box p-l-4px grid box-border w-full overflow-hidden  ${(isExpand.value) ? 'is-open' : 'is-close'}` }, h('div', { class: `min-h-0 w-full ${item.fixed ? 'overflow-auto scrollbar-thin' : 'overflow-hidden'}` }, cls))
    ]) : h('div', { class: `_nodelist-item flex items-center gap-6px w-full box-border p-x-10px p-y-4px cursor-pointer select-none  ${show.value ? "is-show" : "is-hide"} ${item.class || ''}`, onMousedown: (e) => handleDrag(item, e) }, [
        item.icon ? typeof item.icon == 'string' ? h('b', { class: `text-18px ${item.icon}` }) : h(item.icon) : '',
        h('b', { class: "truncate flex-1", title: item.label }, item.label), h('')])
}, { props: ['item'] })
</script>

<template>
    <div class="menu-list">
        <template v-for="item in list">
            <Item :item="item"></Item>
        </template>
    </div>
</template>